<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码 - 手机号找回</title>
    <link href="__CDN__/assets/css/bootstrap5.3.0.min.css?v=1757746100" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f8fa 0%, #e9ecef 100%);
            font-family: 'Helvetica Neue', Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 20px 0;
        }
        
        /* 背景图样式 */
        body {
            background-image: url('/assets/img/loginbg.png');
        }
        
        .password-reset-container {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
            padding: 35px;
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            border-top: 5px solid #f90;
        }
        .logo {
            text-align: center;
            margin-bottom: 25px;
        }
        .logo h2 {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .logo p {
            color: #6c757d;
            font-size: 1.1rem;
        }
        .form-control:focus {
            border-color: #f90;
            box-shadow: 0 0 0 0.25rem rgba(255, 153, 0, 0.25);
        }
        .btn-primary {
            background: linear-gradient(to right, #f90, #ff7b00);
            border: none;
            padding: 12px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-primary:hover {
            background: linear-gradient(to right, #ff7b00, #f90);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(255, 153, 0, 0.3);
        }
        .btn-outline-secondary {
            padding: 10px;
            border-color: #f90;
            color: #f90;
            transition: all 0.3s;
        }
        .btn-outline-secondary:hover, .btn-outline-secondary:focus {
            background-color: #f90;
            color: white;
            border-color: #f90;
        }
        .input-group-text {
            background-color: #f8f9fa;
            border-color: #ced4da;
        }
        .form-label {
            font-weight: 500;
            color: #495057;
            margin-bottom: 8px;
        }
        .divider {
            text-align: center;
            margin: 25px 0;
            position: relative;
        }
        .divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #e9ecef;
        }
        .divider span {
            background-color: #fff;
            position: relative;
            padding: 0 15px;
            color: #6c757d;
            font-size: 0.9rem;
        }
        .alert {
            border-radius: 8px;
            padding: 12px 16px;
        }
        .password-strength {
            height: 5px;
            margin-top: 8px;
            border-radius: 3px;
            background-color: #e9ecef;
            overflow: hidden;
        }
        .password-strength-bar {
            height: 100%;
            width: 0;
            border-radius: 3px;
            transition: width 0.3s;
        }
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        .footer-links a {
            color: #6c757d;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.2s;
        }
        .footer-links a:hover {
            color: #f90;
        }
        .countdown {
            color: #f90;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="password-reset-container">
            <div class="logo">
                <h2>找回密码</h2>
                <p class="text-muted">请输入您的手机号以重置密码</p>
            </div>
            
            <!--<div class="alert alert-info d-flex align-items-center" role="alert">-->
            <!--    <i class="bi bi-info-circle me-2"></i>-->
            <!--    <div>请输入您注册时使用的手机号，我们将发送验证码帮助您重置密码</div>-->
            <!--</div>-->
            
            <form id="passwordResetForm">
                <div class="mb-4">
                    <label for="phone" class="form-label">手机号码</label>
                    <div class="input-group">
                        <!--<span class="input-group-text"><i class="bi bi-phone"></i></span>-->
                        <input type="tel" class="form-control" name="mobile" id="phone" placeholder="请输入您的手机号码" required>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="verificationCode" class="form-label">验证码</label>
                    <div class="input-group">
                        <!--<span class="input-group-text"><i class="bi bi-chat-square-dots"></i></span>-->
                        <input type="text" class="form-control" id="verificationCode" name="captcha" placeholder="请输入验证码" required>
                        <button type="button" class="btn btn-outline-secondary" id="sendCodeBtn">
                            <span id="btnText">发送验证码</span>
                            <span id="countdown" class="countdown"></span>
                        </button>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="newPassword" class="form-label">新密码</label>
                    <div class="input-group">
                        <!--<span class="input-group-text"><i class="bi bi-lock"></i></span>-->
                        <input type="password" class="form-control" name="newpassword" id="newPassword" placeholder="请设置至少8位新密码" required>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label for="confirmPassword" class="form-label">确认密码</label>
                    <div class="input-group">
                        <!--<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>-->
                        <input type="password" class="form-control" name="confirmpassword" id="confirmPassword" placeholder="请再次输入新密码" required>
                    </div>
                </div>
                
                <div class="d-grid gap-2 mb-4">
                    <button type="submit" class="btn btn-primary btn-lg">
                        重置密码
                    </button>
                </div>
                
                <div class="footer-links">
                    <a href="login">返回登录页</a>
                </div>
            </form>
        </div>
    </div>

    <script src="__CDN__/assets/js/bootstrap.bundle.min.js?v=1757746100"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sendCodeBtn = document.getElementById('sendCodeBtn');
            const phoneInput = document.getElementById('phone');
            const captchaInput = document.getElementById('verificationCode');
          
            const form = document.getElementById('passwordResetForm');
            const newPasswordInput = document.getElementById('newPassword');
            const btnText = document.getElementById('btnText');
            const countdownEl = document.getElementById('countdown');
            
            // 发送验证码
            sendCodeBtn.addEventListener('click', function() {
                const phone = phoneInput.value;
                if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                    alert('请输入正确的手机号码');
                    phoneInput.focus();
                    return;
                }
                
                // 禁用按钮并开始倒计时
                sendCodeBtn.disabled = true;
                btnText.textContent = '';
                let countdown = 60;
                countdownEl.textContent = `${countdown}s`;
                
                // 调用发送验证码接口
                fetch('/api/sms/send', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        // 如果需要CSRF令牌验证
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    },
                    body: JSON.stringify({
                        mobile: phone,
                        event: 'resetpwd'
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }
                    return response.json();
                })
                .then(data => {
                    // 假设接口返回格式：{code: 0, msg: '成功'} 或 {code: 1, msg: '错误信息'}
                    if (data.code === 1) {
                        
                        
                        const timer = setInterval(function() {
                        if (countdown > 0) {
                            countdownEl.textContent = `${countdown}s`;
                            countdown--;
                        } else {
                            clearInterval(timer);
                            countdownEl.textContent = '';
                            btnText.textContent = '发送验证码';
                            sendCodeBtn.disabled = false;
                        }
                    }, 1000);
                    
                    alert(`验证码已发送到手机 ${phone}`);
                        
    
                    } else {
                        // 发送失败
                        throw new Error(data.msg || '发送验证码失败，请稍后重试');
                    }
                })
                .catch(error => {
                    // 恢复按钮状态
                    btnText.textContent = '发送验证码';
                    sendCodeBtn.disabled = false;
                    
                });
                
                
                
            });
            
            // 表单提交
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const phone = phoneInput.value;
                const code = document.getElementById('verificationCode').value;
                const newPassword = newPasswordInput.value;
                const confirmPassword = document.getElementById('confirmPassword').value;
                
                if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                    alert('请输入正确的手机号码');
                    phoneInput.focus();
                    return;
                }
                
                if (!code || code.length !== 4) {
                    alert('请输入4位验证码');
                    document.getElementById('verificationCode').focus();
                    return;
                }
                
                if (!newPassword || newPassword.length < 8 ) {
                    alert('密码长度不能少于8位');
                    newPasswordInput.focus();
                    return;
                }
                
                if (!newPassword || newPassword.length > 30 ) {
                    alert('密码长度为8-30位');
                    newPasswordInput.focus();
                    return;
                }
                
                if (newPassword !== confirmPassword) {
                    alert('两次输入的密码不一致');
                    document.getElementById('confirmPassword').focus();
                    return;
                }
                
                // 调用忘记接口
                fetch('/api/user/forgotpwd', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        // 如果需要CSRF令牌验证
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    },
                    body: JSON.stringify({
                        type: 'mobile',
                        mobile: phone,
                        captcha: code,
                        newpassword: newPassword
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }
                    return response.json();
                })
                .then(data => {
                    // 假设接口返回格式：{code: 1, msg: '成功'} 或 {code: 0, msg: '错误信息'}
                    if (data.code === 1) {
                        
                        
                       // 重置密码成功
                        alert('密码重置成功！');
                        
                        // 模拟跳转到登录页
                        window.location.href = 'login';
                                
    
                    } else {
                        // 发送失败
                        throw new Error(data.msg || '发送验证码失败，请稍后重试');
                    }
                })
                .catch(error => {
                    // 显示错误信息
                    alert(error.message);
                });
                
            });
        });
    </script>
</body>
</html>